<template>
    <div :class="{'menu-dis':arrNum==0}">
        <span @click="changePage('/system/user')" :style="{color : ($route.name=='user'?'blue':'')}">
            <el-icon class="left-nav-icon"><UserFilled /></el-icon>
            用户管理
        </span>
        <span @click="changePage('/system/role')" :style="{color : ($route.name=='role'?'blue':'')}">
            <el-icon class="left-nav-icon"><Avatar /></el-icon>
            角色管理
        </span>
        <span @click="changePage('/system/menu')" :style="{color : ($route.name=='menu'?'blue':'')}">
            <el-icon class="left-nav-icon"><Document /></el-icon>
            菜单管理
        </span>
        <span @click="changePage('/system/dept')" :style="{color : ($route.name=='dept'?'blue':'')}">
            <el-icon class="left-nav-icon"><List /></el-icon>
            部门管理
        </span>
        <span @click="changePage('/system/post')" :style="{color : ($route.name=='post'?'blue':'')}">
            <el-icon class="left-nav-icon"><Notebook /></el-icon>
            岗位管理
        </span>
        <span @click="changePage('/system/dect')" :style="{color : ($route.name=='dect'?'blue':'')}">
            <el-icon class="left-nav-icon"><Memo /></el-icon>
            字典管理
        </span>
        <span @click="changePage('/system/config')" :style="{color : ($route.name=='config'?'blue':'')}">
            <el-icon class="left-nav-icon"><Platform /></el-icon>
            参数设置
        </span>
        <span @click="changePage('/system/notice')" :style="{color : ($route.name=='notice'?'blue':'')}">
            <el-icon class="left-nav-icon"><ChatLineRound /></el-icon>
            通知公告
        </span>
        <span @click="arNum=(arNum==0?1:0)"style="padding-left: 60px;">
            <el-icon class="left-nav-icon"><Edit /></el-icon>
            日志管理
            <ArrowChange class="left-nav-arr" :arr-num="arNum"/>
        </span>
        <DropdownMenu4 :arr-num="arNum"/>

    </div>
</template>

<script setup>
import ArrowChange from './ArrowChange.vue'
import { defineProps, ref } from 'vue'
import DropdownMenu4 from './DropdownMenu4.vue';
import { useRouter } from 'vue-router';
let arNum = ref(0)
const router = useRouter();
const props = defineProps({
    arrNum: {
        type: Number, //用来指定当前自定义属性的数据类型
        default: 1 //用来指定当前自定义属性的默认值
    }
});

function changePage(pageUrl) {
    router.push(pageUrl)
}

</script>

<style scoped>
.menu-dis{display: none;}
div{ z-index: 999;}
div span{display: block; color: #fff; background-color: #1f2d3d; padding: 15px; font-size: 18px; text-align: center; cursor: pointer;}
main span .left-nav-icon{vertical-align: middle; margin-right: 15px;}
div span:hover{background-color: #001528;}
div span .left-nav-arr{margin-left: 20px; display: inline-block;}
</style>